/* @flow */
'use strict';

var React = require('react-native');

var {
	ScrollView,
	StyleSheet,
	View,
	Image,
	Text
} = React;

var PicturesURL = [
	'http://img2.3lian.com/img2007/10/28/123.jpg',
	'http://pic9.nipic.com/20100812/3289547_144304019987_2.jpg',
	'http://img2.3lian.com/img2007/10/28/123.jpg',
	'http://pic9.nipic.com/20100812/3289547_144304019987_2.jpg',
	'http://img2.3lian.com/img2007/10/28/123.jpg',
	'http://pic9.nipic.com/20100812/3289547_144304019987_2.jpg',
	'http://img2.3lian.com/img2007/10/28/123.jpg',
	'http://pic9.nipic.com/20100812/3289547_144304019987_2.jpg'
];

PicturesURL = PicturesURL.concat(PicturesURL);

var ScollItem = React.createClass({

	render: function() {
		return (
			<View style={styles.subViewStyle}>
				<Image
				  style={styles.imageStyle}
				  source={{uri: this.props.uri}} />
			</View>
		);
	}

});

var displaySubView = (uri, i) => <ScollItem key={i} uri={uri}/>;


var ScrollViewCom = React.createClass({

	getInitialState: function() {
		return {
			dataAry: PicturesURL,
			currentIndex: 0
		};
	},

	scollMethod: function(event) {
		console.log('---scollMethod---');
	},

	render: function() {
		return (
			<ScrollView
			  automaticallyAdjustContentInsets={false}
			  contentContainerStyle={styles.contentContainer}
			  style={styles.scrollView}
			  horizontal={false}
			  onScroll={this.scollMethod}>
			  {PicturesURL.map(displaySubView)}
			</ScrollView>
		);
	}
});



var styles = StyleSheet.create({
	contentContainer: {
		paddingVertical: 5
	},
	scrollView: {
		flex: 1,
		marginTop: 64
	},
	subViewStyle: {
		flex: 1
	},
	imageStyle: {
		height: 180,
		width: 320,
		padding: 5
	}
});


module.exports = ScrollViewCom;